<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "首页",
  },
}
</route>

<template>
  <view class="container">
    <!-- 头部区域 -->
    <view class="header">
      <h1 class="app-name">优医</h1>
    </view>
    <!-- 搜索区域 -->
    <view class="search-container">
      <view class="search-box">
        <img
          src="@/static/app/icons/search.svg"
          alt="搜索"
          class="search-icon"
        />
        <input
          type="text"
          placeholder="搜一搜: 疾病症状/医生/健康知识"
          class="search-input"
        />
      </view>
    </view>
    <!-- 问医生+极速问诊+开药门诊 -->
    <view class="DoctorBox">
      <view class="DoctorBox1">
        <view>
          <img src="@/static/my/i1.png" alt="" />
        </view>
        <view style="font-size: 15px; margin-top: 2px">问医生</view>
        <view style="font-size: 12px; color: #848484; margin-top: 3px">
          按科室查问医生
        </view>
      </view>
      <view class="DoctorBox1">
        <view>
          <img src="@/static/my/i2.png" alt="" style="width: 45px" />
        </view>
        <view style="font-size: 15px; margin-top: 2px">极速问诊</view>
        <view style="font-size: 12px; color: #848484; margin-top: 2px">
          20s医生极速回复
        </view>
      </view>
      <view class="DoctorBox1">
        <view>
          <img src="@/static/my/i3.png" alt="" />
        </view>
        <view style="font-size: 15px; margin-top: 2px">开药门诊</view>
        <view style="font-size: 12px; color: #848484; margin-top: 2px">
          线上买药更方便
        </view>
      </view>
    </view>

    <view class="Content">
      <view class="ContentItem">
        <view>
          <img src="@/static/my/t1.png" alt="" />
        </view>
        <view style="font-size: 12px; margin-top: 2px">药品订单</view>
      </view>
      <view class="ContentItem">
        <view>
          <img src="@/static/my/t2.png" alt="" />
        </view>
        <view style="font-size: 12px; margin-top: 2px">健康档案</view>
      </view>
      <view class="ContentItem">
        <view>
          <img src="@/static/my/t3.png" alt="" />
        </view>
        <view style="font-size: 12px; margin-top: 2px">我的处方</view>
      </view>
      <view class="ContentItem">
        <view>
          <img src="@/static/my/t4.png" alt="" />
        </view>
        <view style="font-size: 12px; margin-top: 2px">疾病查询</view>
      </view>
    </view>

    <!-- 轮播图 -->
    <wd-swiper
      :list="swiperList"
      autoplay
      v-model:current="current"
      @click="handleClick"
      @change="onChange"
      class="p-3"
    ></wd-swiper>
  </view>
</template>

<script lang="ts" setup>
const current = ref<number>(0);
const swiperList = ref(["../../static/s1.png", "../../static/s1.png"]);
function handleClick(e) {
  console.log(e);
}
function onChange(e) {
  console.log(e);
}
</script>

<style>
.uni-swiper {
  width: 80px;
  height: 100px;
}
.Content {
  display: flex;
  justify-content: space-around;
  margin-top: 25px;
}

.ContentItem {
  width: 70px;
  text-align: center;
}

.ContentItem img {
  width: 35px;
  height: 33px;
}

/* 问医生+极速问诊+开药门诊 */
.DoctorBox {
  display: flex;
  justify-content: space-around;
  margin-top: -24px;
}
.DoctorBox1 {
  text-align: center;
  width: 100px;
}
.DoctorBox1 img {
  width: 40px;
  height: 40px;
}

/* 头部+搜索 */
.container {
  width: 100%;
  height: 100vh;

  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 80px;
  background-color: #2cb5a5;
  display: flex;
  position: relative;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
.app-name {
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin-top: 15px;
  margin-left: 10px;
}
.search-container {
  padding: 15px;
  position: relative;
  top: -40px;
}
.search-box {
  width: 100%;
  height: 40px;
  background-color: white;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.search-icon {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  opacity: 0.5;
}
.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
}
.search-input::placeholder {
  color: #999;
}

/* 问医生+极速问诊+开药问诊 */
</style>
